<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <style type="text/css">

    </style>
</head>
<body>
    <div id="app">

    </div>
    <script type="text/javascript" src='../vue/dist/vue.js'></script>
    <script type="text/javascript">

    var MySlot = {
        template: `
            <li>
                <slot name="one"></slot>
                <hr/>
                <slot name="two"></slot>
            </li>
        `
    };
    Vue.component('my-slot',MySlot);
    // slot多坑插槽
    //入口组件：在内部实现一个九宫
        var App = {
            template: `<div>
                <ul>
                    <my-slot>
                        <h1 slot='one'>这是第一个插槽</h1>

                        <h1 slot='two'>这是第二个插槽</h1>
                    </my-slot>

                </ul>

            </div>`,
            data: function(){
                return {

                }
            },

        };

        new Vue({
            el: '#app',
            components: {
                app: App
            },
            template:'<app/>'
        });

    </script>
</body>
</html>